<template>
    <div>
        <div class="j-checkbox" v-bind="$attrs" @click="onChoose">
            <div class="img-box" :class="{ choose: innerValue }">
                <img class="dui" src="@/assets/dui.png" v-show="innerValue" />
            </div>
            <slot></slot>
        </div>
        <div class="j-input-err" v-if="err">{{ err }}</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from "vue";

const props = defineProps({
    label: String,
    modelValue: Boolean,
    err: String
});

const emit = defineEmits(["update:modelValue", "change"]);
const innerValue = ref(props.modelValue);

watch(
    () => props.modelValue,
    (val: any) => {
        console.log("change checkbok");
        innerValue.value = val;
    }
);

watch(
    () => innerValue.value,
    newValue => {
        emit("update:modelValue", newValue);
    }
);

const onChoose = () => {
    console.log("fgfffffff")
    innerValue.value = !innerValue.value;
    emit("change");
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
